<!--  -->
<template>
  <pageTabelLayout>
    <template #pageHeader>
      <a-form v-if="headerShow" :model="form" layout="inline" size="mini">
        <a-form-item label="盘点单号">
          <a-input
            allow-clear
            class="bacClass"
            v-model="form.checkCode"
            :style="{ width: '200px' }"
            @press-enter="huiche"
          />
        </a-form-item>
        <CorporateSectorCascader
          :configCascader="configCascader2"
          @changeCascader="changeCascader2"
        />
        <a-form-item label-col-flex="80px" label="仓库" field="warehouseId">
          <a-select
            popup-container="html"
            class="bacClass"
            v-model="form.warehouseId"
            allow-clear
            :style="{ width: '200px' }"
          >
            <a-option v-for="item in fhWhList2" :value="item.id">
              {{ item.warehouseName }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="日期">
          <a-range-picker
            popup-container="html"
            class="bacClass"
            :style="{ width: '250px' }"
            v-model="form.Dates"
            @change="DateChange"
          />
        </a-form-item>
      </a-form>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <!-- '开需求单', -->
      <div style="text-align: end">
        <Toolbar :items="[`查询`]" @select="cx"> </Toolbar>
      </div>
      <div class="gang"></div>
    </template>
    <template #pageTabel>
      <a-spin
        :loading="form.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <a-tabs :lazy-load="true" justify @change="tabChanges">
          <a-tab-pane :key="1" title="未登记">
            <div style="height: 100%">
              <AgGridVuesCopys
                :rowHeight="33"
                :headerHeight="33"
                :suppressCopyRowsToClipboard="true"
                :suppressDragLeaveHidesColumns="true"
                rowSelection="multiple"
                @grid-ready="gridReady"
                @columnResized="onColumnResized"
                @columnMoved="onColumnMoved"
                @columnVisible="onColumnVisible"
                style="height: calc(100% - 45px)"
                :defaultColDef="defaultColDef"
                class="ag-theme-alpine"
                :rowData="dataList"
                :columnDefs="tc"
                :localeText="localeText1"
              ></AgGridVuesCopys>
              <paginationCopys
                :page-size-options="pagingList1"
                :total="total"
                show-total
                show-jumper
                show-page-size
                @change="PageSize"
                @page-size-change="change1"
                style="justify-content: center"
                :page-size="size"
                :current="page"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" title="已登记">
            <div style="height: 100%">
              <AgGridVuesCopys
                :rowHeight="33"
                :headerHeight="33"
                :suppressCopyRowsToClipboard="true"
                :suppressDragLeaveHidesColumns="true"
                rowSelection="multiple"
                @grid-ready="gridReady2"
                @columnResized="onColumnResized2"
                @columnMoved="onColumnMoved2"
                @columnVisible="onColumnVisible2"
                style="height: calc(100% - 45px)"
                :defaultColDef="defaultColDef"
                class="ag-theme-alpine"
                :rowData="dataList2"
                :columnDefs="tc2"
                :localeText="localeText1"
              ></AgGridVuesCopys>
              <paginationCopys
                :page-size-options="pagingList1"
                :total="total"
                show-total
                show-jumper
                show-page-size
                @change="PageSize"
                @page-size-change="change1"
                style="justify-content: center"
                :page-size="size"
                :current="page"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </template>

    <el-dialog v-model="addWeightDialog3" :width="1200" title="登记" top="15vh">
      <div style="width: 100%; text-align: right; margin-bottom: 10px">
        <a-space>
          <a-button type="primary" v-if="tabIds == 1" @click="importHandler">导入</a-button>
          <a-button type="outline" v-if="tabIds == 1" @click="exports">导出</a-button>
        </a-space>
      </div>
      <el-table :data="tableData" border style="width: 100%; height: 500px">
        <el-table-column prop="customName" label="客户名称 " width="150" />
        <el-table-column prop="yarnCode" label="原料编号" width="150" />
        <el-table-column prop="yarnName" label="原料名称" width="150" />
        <el-table-column prop="yarnBrand" label="纱牌" width="150" />
        <el-table-column prop="yarnBatch" label="纱批" width="150" />
        <el-table-column prop="level" label="等级" width="150" />
        <el-table-column prop="matchColor" label="可配色称" width="150" />
        <el-table-column prop="colorCode" label="色号" width="150" />
        <el-table-column prop="colorName" label="色称" width="150" />
        <el-table-column prop="stockPieceCount" label="整件/个数(库存)" width="150" />
        <el-table-column prop="stockPieceNumber" label="整件/件数(库存)" width="150" />
        <el-table-column prop="stockPieceWeight" label="整件/件重(库存)" width="150" />
        <el-table-column prop="stockBulkCount" label="散件/个数(库存)" width="150" />
        <el-table-column prop="stockBulkNumber" label="散件/件数(库存)" width="150" />
        <el-table-column prop="stockBulkWeight" label="散件/件重(库存) " width="150" />
        <el-table-column prop="weightTotal" label="总数量" width="150" />
        <el-table-column prop="unit" label="单位" width="150" />
        <el-table-column prop="location" label="库位" width="150" />
        <el-table-column prop="actualPieceCount" label="整件/个数(实际)" width="150" />
        <el-table-column prop="actualPieceNumber" label="整件/件数(实际)" width="150" />
        <el-table-column prop="actualPieceWeight" label="整件/件重(实际)" width="150" />
        <el-table-column prop="actualBulkCount" label="散件/个数(实际)" width="150" />
        <el-table-column prop="actualBulkNumber" label="散件/件数(实际)" width="150" />
        <el-table-column prop="actualBulkWeight" label="散件/件重(实际)" width="150" />
        <el-table-column prop="supplier" label="供应商名称" width="150" />
        <el-table-column prop="customOrderNo" label="客户订单号" width="150" />
        <el-table-column prop="yanrId" label="纱线ID(销售系统)" width="150" />
        <el-table-column prop="workBatchID" label="纱线批次ID(销售系统）" width="150" />
        <el-table-column prop="stockInTime" label="入库时间" width="150" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="() => (addWeightDialog3 = false)">关闭</el-button>
          <el-button type="primary" @click="pinChangs" v-if="tabIds == 1">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  import { reactive, toRefs, ref, onMounted } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { post, get } from '@/api/http'
  import { Message, Modal } from '@arco-design/web-vue'
  
  import { localeText } from '@/api/aggridZw'
  import { pagingList } from '@/api/paging'
  import { EXELTABLE } from '@/utils/exportEXCEL'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  import WHService from '@/service/wh'
  import dayjs from 'dayjs'
  import axios from 'axios'
  import { baseURL } from '@/api/axios.config'
  import { exportStyleExcel } from '@/api/Export2StyleExcel'
  import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
  import { saveOrUpdateGridState as saveOrUpdateGridState02 } from '@/hooks/useGridState'
  const headerShow = ref(true)

  const tabIds = ref(1)

  const tabChanges = (val: any) => {
    tabIds.value = val
    if (val == 1) {
      doRefresh()
    } else {
      doRefresh2()
    }
  }

  const pagingList1: any = ref(pagingList)
  const localeText1: any = ref(localeText)

  const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
  }
  const gridOption = ref()
  const colState = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
  }

  const gridOption2 = ref()
  const colState2 = ref()
  const gridReady2 = (params: any) => {
    gridOption2.value = params.api
    colState2.value = params.columnApi
  }

  const total = ref(0)
  const page = ref(1)
  const size = ref(10)
  function PageSize(val: any) {
    page.value = val
    if (tabIds.value == 1) {
      doRefresh()
    } else {
      doRefresh2()
    }
  }
  function change1(val: any) {
    size.value = val
    if (tabIds.value == 1) {
      doRefresh()
    } else {
      doRefresh2()
    }
  }

  const dataList: any = ref([])
  const dataList2: any = ref([])

  function doRefresh() {
    form.pageLoading = true
    post({
      url: '/wms/yarnStockCeckPlan/getPage',
      data: {
        page: page.value,
        size: size.value,
        beginDate: !form.Dates[0] ? '' : form.Dates[0],
        endDate: !form.Dates[1] ? '' : form.Dates[1],
        checkCode: form.checkCode,
        warehouseId: form.warehouseId,
        companyId: form.companyId,
        registerState: 0,
      },
    })
      .then(({ data, code }: any) => {
        if (code === 200) {
          dataList.value = data.list
          gridOption.value.setRowData(data.list)
          total.value = data.total
        }
      })
      .catch(console.log)
      .finally(() => {
        form.pageLoading = false
      })
  }

  function doRefresh2() {
    form.pageLoading = true
    post({
      url: '/wms/yarnStockCeckPlan/getPage',
      data: {
        page: page.value,
        size: size.value,
        beginDate: !form.Dates[0] ? '' : form.Dates[0],
        endDate: !form.Dates[1] ? '' : form.Dates[1],
        checkCode: form.checkCode,
        warehouseId: form.warehouseId,
        companyId: form.companyId,
        registerState: 1,
      },
    })
      .then(({ data, code }: any) => {
        if (code === 200) {
          dataList2.value = data.list
          gridOption2.value.setRowData(data.list)
          total.value = data.total
        }
      })
      .catch(console.log)
      .finally(() => {
        form.pageLoading = false
      })
  }

  const cx = () => {
    page.value = 1
    if (tabIds.value == 1) {
      doRefresh()
    } else {
      doRefresh2()
    }
  }

  onMounted(() => {
    updateGridState01()
    updateGridState02()
    pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
      pageData.rHeight = pageData.rHeight
    }
    if (tabIds.value == 1) {
      doRefresh()
    } else {
      doRefresh2()
    }
  })
  const pageData = reactive({
    showAdd: false,
    rHeight: 0,
  })

  const dataForm: any = reactive({
    checkCode: '',
    remark: '',
    warehouseName: '',
    companyName: '',
    warehouseId: null,
    companyId: null,
    warehouseldAndName: '',
  })

  const tableColumns: any = [
    {
      title: '盘点单号',
      key: 'checkCode',
      dataIndex: 'checkCode',
      width: 150,
    },
    {
      title: '盘点计划时间',
      key: 'planDate',
      dataIndex: 'planDate',
      width: 150,
    },
    // {
    //     title: "盘点登记时间",
    //     key: "registerDate",
    //     dataIndex: "registerDate",
    //     width: 150,
    // },
    // {
    //     title: "平仓时间",
    //     key: "balanceDate",
    //     dataIndex: "balanceDate",
    //     width: 150,
    // },
    {
      title: '公司',
      key: 'companyName',
      dataIndex: 'companyName',
      width: 200,
    },
    {
      title: '仓库名称',
      key: 'warehouseName',
      dataIndex: 'warehouseName',
      width: 450,
    },
    {
      title: '计划状态',
      key: 'planState',
      dataIndex: 'planState',
      fixed: 'right',
      width: 180,
    },
    {
      title: '登记状态',
      key: 'registerState',
      dataIndex: 'registerState',
      width: 150,
    },
    {
      title: '平仓状态',
      key: 'balanceState',
      dataIndex: 'balanceState',
      width: 150,
    },
    {
      title: '锁仓状态',
      key: 'lockState',
      dataIndex: 'lockState',
      width: 150,
      fixed: 'right',
    },
    {
      title: '登记人',
      key: 'registerName',
      dataIndex: 'registerName',
      width: 150,
    },
    {
      title: '平仓人',
      key: 'balanceName',
      dataIndex: 'balanceName',
      width: 150,
    },
    {
      title: '创建人',
      key: 'createName',
      dataIndex: 'createName',
      width: 150,
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      width: 150,
    },
    {
      title: '修改人',
      key: 'updateName',
      dataIndex: 'updateName',
      width: 150,
    },
    {
      title: '修改时间',
      key: 'updateTime',
      dataIndex: 'updateTime',
      width: 150,
    },
    {
      title: '备注',
      key: 'remark',
      dataIndex: 'remark',
      width: 150,
    },
    {
      title: '操作',
      key: 'alites',
      dataIndex: 'alites',
      slotName: 'alites',
      width: 80,
      fixed: 'right',
    },
  ]

  const Corporate: any = ref()
  const tempCheckPlanId = ref(null)
  let tc: any[] = tableColumns.map((o: any) => {
    let obj = {
      headerName: o.title,
      field: o.key,
      pinned: o['fixed'],
    }
    if (o.key === 'alites') {
      obj['resizable'] = false
      obj['filter'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `<el-button style="color:#165dff;" link @click="a1">查看物料清单</el-button>`,
        setup(props: any) {
          const a1 = () => {
            // /wms/GreyStockCheckDetail/getList  参数{"checkPlanId":1}
            post({
              url: '/wms/yarnstockcheckdetail/queryDetailData',
              data: {
                checkPlanId: props.params.data.id,
              },
            }).then(({ code, data, message }) => {
              if (code == 200) {
                tempCheckPlanId.value = props.params.data.id
                addWeightDialog3.value = true
                tableData.value = data
              } else {
                Message.error(message)
              }
            })
          }
          return {
            a1,
          }
        },
      }
    }
    if (o.key === 'planState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="pinkpurple">未确认</a-tag>
            <a-tag v-if="a == 1" color="green">已确认</a-tag>
            <a-tag v-if="a == 2" color="red">已作废</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.planState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0'
            ? '未确认'
            : params.value == '1'
            ? '已确认'
            : params.value == '2'
            ? '已作废'
            : ''
        },
      }
    }
    if (o.key === 'lockState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="pinkpurple">未锁仓 </a-tag>
            <a-tag v-if="a == 1" color="red">已锁仓</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.lockState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '未锁仓' : params.value == '1' ? '已锁仓' : ''
        },
      }
    }
    if (o.key === 'registerState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="red">未登记 </a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已登记</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.registerState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '未登记' : params.value == '1' ? '已登记' : ''
        },
      }
    }
    if (o.key === 'balanceState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="red">未平仓</a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已平仓</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.balanceState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '未平仓' : params.value == '1' ? '已平仓' : ''
        },
      }
    }
    return obj
  })

  let a = [
    {
      showRowGroup: 'hide_def',
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: 'left',
    },
  ]
  tc = a.concat(tc)

  const tableColumns2: any = [
    {
      title: '盘点单号',
      key: 'checkCode',
      dataIndex: 'checkCode',
      width: 150,
    },
    {
      title: '盘点计划时间',
      key: 'planDate',
      dataIndex: 'planDate',
      width: 150,
    },
    {
      title: '盘点登记时间',
      key: 'registerDate',
      dataIndex: 'registerDate',
      width: 150,
    },
    {
      title: '平仓时间',
      key: 'balanceDate',
      dataIndex: 'balanceDate',
      width: 150,
    },
    {
      title: '公司',
      key: 'companyName',
      dataIndex: 'companyName',
      width: 200,
    },
    {
      title: '仓库名称',
      key: 'warehouseName',
      dataIndex: 'warehouseName',
      width: 450,
    },
    {
      title: '计划状态',
      key: 'planState',
      dataIndex: 'planState',
      fixed: 'right',
      width: 180,
    },
    {
      title: '登记状态',
      key: 'registerState',
      dataIndex: 'registerState',
      width: 150,
    },
    {
      title: '平仓状态',
      key: 'balanceState',
      dataIndex: 'balanceState',
      width: 150,
    },
    {
      title: '锁仓状态',
      key: 'lockState',
      dataIndex: 'lockState',
      width: 150,
      fixed: 'right',
    },
    {
      title: '登记人',
      key: 'registerName',
      dataIndex: 'registerName',
      width: 150,
    },
    {
      title: '平仓人',
      key: 'balanceName',
      dataIndex: 'balanceName',
      width: 150,
    },
    {
      title: '创建人',
      key: 'createName',
      dataIndex: 'createName',
      width: 150,
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      width: 150,
    },
    {
      title: '修改人',
      key: 'updateName',
      dataIndex: 'updateName',
      width: 150,
    },
    {
      title: '修改时间',
      key: 'updateTime',
      dataIndex: 'updateTime',
      width: 150,
    },
    {
      title: '备注',
      key: 'remark',
      dataIndex: 'remark',
      width: 150,
    },
    {
      title: '操作',
      key: 'alites',
      dataIndex: 'alites',
      slotName: 'alites',
      width: 80,
      fixed: 'right',
    },
  ]

  let tc2: any[] = tableColumns2.map((o: any) => {
    let obj = {
      headerName: o.title,
      field: o.key,
      pinned: o['fixed'],
    }
    if (o.key === 'alites') {
      obj['resizable'] = false
      obj['filter'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `<el-button style="color:#165dff;" link @click="a1">查看物料清单</el-button>`,
        setup(props: any) {
          const a1 = () => {
            post({
              url: '/wms/yarnstockcheckdetail/queryDetailData',
              data: {
                checkPlanId: props.params.data.id,
              },
            }).then(({ code, data, message }) => {
              if (code == 200) {
                addWeightDialog3.value = true
                tableData.value = data
              } else {
                Message.error(message)
              }
            })
          }
          return {
            a1,
          }
        },
      }
    }
    if (o.key === 'planState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="pinkpurple">未确认</a-tag>
            <a-tag v-if="a == 1" color="green">已确认</a-tag>
            <a-tag v-if="a == 2" color="red">已作废</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.planState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0'
            ? '未确认'
            : params.value == '1'
            ? '已确认'
            : params.value == '2'
            ? '已作废'
            : ''
        },
      }
    }
    if (o.key === 'lockState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="pinkpurple">未锁仓 </a-tag>
            <a-tag v-if="a == 1" color="red">已锁仓</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.lockState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '未锁仓' : params.value == '1' ? '已锁仓' : ''
        },
      }
    }
    if (o.key === 'registerState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="red">未登记 </a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已登记</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.registerState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '未登记' : params.value == '1' ? '已登记' : ''
        },
      }
    }
    if (o.key === 'balanceState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 150
      obj['cellRenderer'] = {
        template: `
            <a-tag v-if="a == 0" color="red">未平仓</a-tag>
            <a-tag v-if="a == 1" color="pinkpurple">已平仓</a-tag>
            `,
        setup(props: any) {
          return {
            a: props.params.data.balanceState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '未平仓' : params.value == '1' ? '已平仓' : ''
        },
      }
    }
    return obj
  })
  tc2 = a.concat(tc2)

  const form: any = reactive({
    checkCode: '',
    warehouseName: '',
    Dates: ['', ''],
    companyId: null,
    warehouseId: null,
  })

  const huiche = () => {
    // doRefresh();
  }

  const DateChange = (val: any) => {
    if (!val) {
      form.Dates = ['', '']
    }
  }

  const configCascader2 = ref<{}>({
    corporateWidth: '200px', //公司宽度
    corporateNameLabelWidth: '80px',
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '选择公司', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })
  const whService2 = new WHService()
  const fhWhList2: any = whService2.whList
  const changeCascader2 = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    form.warehouseId = ''
    form.companyId = corporateId
    whService2.getWarhouseListByFirmId(corporateId, '原纱仓')
  }

  const addWeightDialog3 = ref(false)

  const pinChangs = () => {
    post({
      url: 'wms/yarnstockcheckdetail/updatetYarnStockCheckDetail',
      data:tableData.value,
    }).then(({ code, message }) => {
      if (code == 200) {
        addWeightDialog3.value = false
        doRefresh()
        Message.success('成功')
      } else {
        Message.error(message)
      }
    })
  }

  const tableData: any = ref([])
  const exports = () => {
    let header = [
      '盘点主键',
      '主键',
      '客户名称',
      '原料编号',
      '原料名称',
      '纱牌',
      '纱批',
      '等级',
      '可配色称',
      '色号',
      '色称',
      '整件/个数(库存)',
      '整件/件数(库存)',
      '整件/件重(库存)',
      '散件/个数(库存)',
      '散件/件数(库存)',
      '散件/件重(库存)',
      '总数量',
      '单位',
      '库位',
      '整件/个数(实际)',
      '整件/件数(实际)',
      '整件/件重(实际)',
      '散件/个数(实际)',
      '散件/件数(实际)',
      '散件/件重(实际)',
      '供应商名称',
      '客户订单号',
      '纱线ID(销售系统)',
      '纱线批次ID(销售系统)',
      '入库时间',
    ]
    let data = []
    tableData.value.forEach((o, i) => {
      data[i] = [
        o['checkPlanId'],
        o['id'],
        o['customName'],
        o['yarnCode'],
        o['yarnName'],
        o['yarnBrand'],
        o['yarnBatch'],
        o['level'],
        o['matchColor'],
        o['colorCode'],
        o['colorName'],
        o['stockPieceCount'],
        o['stockPieceNumber'],
        o['stockPieceWeight'],
        o['stockBulkCount'],
        o['stockBulkNumber'],
        o['stockBulkWeight'],
        o['weightTotal'],
        o['unit'],
        o['location'],
        o['stockPieceCount'],
        o['stockPieceNumber'],
        o['stockPieceWeight'],
        o['stockBulkCount'],
        o['stockBulkNumber'],
        o['stockBulkWeight'],
        o['supplier'],
        o['customOrderNo'],
        o['yanrId'],
        o['workBatchID'],
        o['stockInTime'],
      ]
    })
    exportStyleExcel({ header, data, filename: '原纱库存明细.xlsx' })
  }

  const importHandler = () => {
    const inputEle: HTMLInputElement = document.createElement('input')
    inputEle.type = 'file'
    inputEle.id = 'fileUploadExcel'
    inputEle.accept =
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
    inputEle.addEventListener('change', (e) => {
      const formData = new FormData()
      if (inputEle.files !== null) {
        formData.append('file', inputEle.files[0] || '')
      } else {
        Message.warning('未选择文件！')
        return
      }
      axios
        .post(baseURL + '/wms/yarnstockcheckdetail/importData', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            token: sessionStorage.getItem('USER-TOKEN-KEY'),
          },
        })
        .then((result) => {
          console.log(result)
          if (result.data['code'] === 200) {
            const listDatas = tableData.value.map((res) => {
              return res.checkPlanId
            })
            const listDatas2 = tableData.value.map((res) => {
              return res.id
            })
            console.log(listDatas)
            console.log(listDatas2)
            // for (let i = 0; i < result.data['data'].length; i++) {
            //   let res = result.data.data[i]
            //   if (!listDatas2.includes(res.id)) {
            //     Message.error('数据有误，请重新导入正确格式数据！')
            //     return
            //   }
            // }
            let newImportArr = []
            if (tableData.value.length) {
              tableData.value.forEach((res: any) => {
                result.data.data.forEach((res2: any) => {
                  if (res.id == res2.id) {
                    res['actualPieceCount'] = res2.actualPieceCount
                    res['actualPieceNumber'] = res2.actualPieceNumber
                    res['actualPieceWeight'] = res2.actualPieceWeight
                    res['actualBulkCount'] = res2.actualBulkCount
                    res['actualBulkNumber'] = res2.actualBulkNumber
                    res['actualBulkWeight'] = res2.actualBulkWeight
                    res['checkPlanId'] = tempCheckPlanId.value
                  } else {
                    res2['checkPlanId'] = tempCheckPlanId.value
                    newImportArr.push(res2)
                  }
                })
              })
              tableData.value = [...tableData.value, ...newImportArr]
            } else {
              const resultData = JSON.parse(JSON.stringify(result.data.data))
              tableData.value = resultData.map((res: any) => {
                res['checkPlanId'] = tempCheckPlanId.value
                return res
              })
            }
            console.log('tb1',tableData.value)
            Message.success('导入成功')
          } else {
            Message.error(result.data.message)
          }
        })
    })
    inputEle.click()
  }
  const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
    saveOrUpdateGridState01('ysPdDjLbs-1', gridOption, colState, tc)
  const onColumnMoved = () => {
    saveGridState01()
  }
  const onColumnResized = () => {
    saveGridState01()
  }
  const onColumnVisible = () => {
    saveGridState01()
  }
  const { saveGridState: saveGridState02, updateGridState: updateGridState02 } =
    saveOrUpdateGridState02('ysPdDjLbs-2', gridOption2, colState2, tc2)
  const onColumnMoved2 = () => {
    saveGridState02()
  }
  const onColumnResized2 = () => {
    saveGridState02()
  }
  const onColumnVisible2 = () => {
    saveGridState02()
  }
</script>
<style lang="less" scoped>
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
